<template>
  <Content title="清线详情">
    <view
      class="device-details"
      :style="model.isClearLine == '否' ? 'padding-bottom:90px' : ''"
    >
      <view class="content">
        <view class="top-box">
          <view class="info-box">
            <view class="text-box">
              <view class="text-box-l text-title">
                <text class="label">工单号:</text>
                <text class="value">{{ model.workCode }}</text>
              </view>
              <uni-icons class="icons" type="right" size="14" color="#999" />
            </view>
            <view class="text-box">
              <text class="label">设备编号:</text>
              <text class="value">{{ model.deviceCode }}</text>
            </view>
            <view class="text-box">
              <text class="label">模具编号:</text>
              <text class="value">{{ model.moldCode }}</text>
            </view>
            <view class="text-box">
              <text class="label">更换前产品编号:</text>
              <text class="value">{{ model.changeMaterialCode }}</text>
            </view>
            <view class="text-box">
              <text class="label">更换前产品名称:</text>
              <text class="value">{{ model.changeMaterialName }}</text>
            </view>
            <view class="text-box">
              <text class="label">更换前产品规格:</text>
              <text class="value">{{ model.changeMaterialModel }}</text>
            </view>
            <view class="line"></view>
            <view class="text-box">
              <text class="label">更换后产品编号:</text>
              <text class="value">{{ model.materialCode }}</text>
            </view>
            <view class="text-box">
              <text class="label">更换后产品名称:</text>
              <text class="value">{{ model.materialName }}</text>
            </view>
            <view class="text-box">
              <text class="label">更换后产品规格:</text>
              <text class="value">{{ model.materialModel }}</text>
            </view>
          </view>
        </view>

        <view class="main-box">
          <List
            ref="orderList"
            :scrollNoData="scrollNoData"
            :isView="model.isClearLine == '否' ? false : true"
            :data="model"
            @itemClick="itemClick"
            @onRefresh="onRefresh"
            @scrollBottom="scrollBottom"
          ></List>
        </view>
      </view>
      <view class="btn-v" v-if="model.isClearLine == '否'">
        <view class="but-box">
          <u-button
            class="btn"
            type="primary"
            @click="replaceMold"
            text="检查结束"
          ></u-button>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import { getPageData } from "@/store/user";
import List from "./components/list";
export default {
  components: {
    Content,
    List,
  },
  data() {
    return {
      model: {},
      data: [],
      search: {
        productionProcessesCode: "",
        pageNum: 1,
        pageSize: 10,
      },
      navIndex: 0,
      id: "",
      show: false,
      modalTitle: "",
      radioGroup: "",
      materialCode: "",
      scroll: false,
      scrollNoData: false,
      obj: {},
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.model = getPageData();
    // this.getList();
  },
  onShow: function () {},
  onReady: function () {
    this.init();
  },
  computed: {},
  mounted() {},
  methods: {
    init() {
      fetch("get", "/dms/mobile/selectWorkByWorkCode", null, {
        workCode: this.model.workCode,
      }).then(({ data }) => {
        this.model = data;
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    onRefresh() {
      // this.getList(true);
    },
    ok() {},
    itemClick(i) {
      this.obj = this.data[i];
    },
    replaceMold() {
      const that = this;
      const arr = this.$refs.orderList.arr || [];
      if (arr.some((item) => !item.isFinish)) {
        uni.$emit("openToast", {
          type: "error",
          title: "请点击完成检查!",
        });
        return;
      }
      that.$loading.open();
      // const data = that.obj;
      const data = arr.map((item) => ({
        checkContent: item.checkContent,
        checkProject: item.checkProject,
        isFinish: item.isFinish,
        productionProcessesCode: item.productionProcessesCode,
        productionProcessesName: item.productionProcessesName,
        remarks: item.remarks,
        img: item.fileList.map((item) => {
          return {
            ...item,
            fileName: item.fileName,
            filePath: item.url,
            fileUrl: item.url,
          };
        }),
      }));
      //   moldCode: data.moldCode,
      //   workCode: that.model.workCode,
      // });
      fetch("POST", "/dms/mobile/clearLine", {
        workCode: this.model.workCode,
        list: data,
      }).then((res) => {
        that.$loading.close();
        uni.$emit("openToast", {
          type: "success",
          title: res.msg,
          complete() {
            that.show = false;
            uni.navigateBack({
              delta: 1,
            });
            // that.getList();
          },
        });
      });
    },
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch("get", "/dms/mobile/clearLineConfigList", obj).then(
        ({ data }) => {
          if (that.scroll) {
            if ((data?.records || []).length === 0) {
              that.scrollNoData = true;
            } else {
              that.data.push(...data?.records);
            }
          } else {
            that.data = data?.records || [];
          }
          that.$loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;

  .top-box {
    padding: 20rpx;
  }
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .main-box {
    flex: 1;
    min-height: 200px;
    overflow: auto;
  }
  .info-box {
    // padding: 0;
    margin: 0 0 20rpx 0;
  }
  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;

    .header {
      margin-bottom: 20rpx;
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }

  .btn-box {
    display: flex;

    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
